<template>
  <div>
    <el-divider content-position="left">基本信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="袋型" prop="bagType">
          <el-select
            v-model="formData.bagType"
            placeholder="请选择袋型"
            style="width: 100%"
            @change="handleBagTypeChange"
          >
            <el-option label="八边封袋" value="八边封袋" />
            <el-option label="异形袋" value="异形袋" />
            <el-option label="吸嘴袋" value="吸嘴袋" />
            <el-option label="牛皮纸袋" value="牛皮纸袋" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="复合工艺" prop="compositeType">
          <el-input v-model="formData.compositeType" placeholder="请输入工艺" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="材质" prop="material">
          <el-input v-model="formData.material" placeholder="请输入材质" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="印刷颜色" prop="surfaceFee">
          <el-input
            v-model="formData.surfaceFee"
            placeholder="请输入印刷颜色"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单面厚度(丝)" prop="thickness" label-width="100px">
          <el-input-number
            v-model="formData.thickness"
            :min="0"
            placeholder=""
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="款数" prop="typeNum" label-width="100px">
          <el-input v-model="formData.typeNum" type="textarea" placeholder="" style="width: 100%" />
        </el-form-item>
      </el-col>

      <!-- 异形袋必须上传设计图 -->
      <el-col v-if="formData.bagType === '异形袋'" :span="20">
        <el-form-item
          label="设计图"
          prop="attach"
          label-width="100px"
          :rules="[{ required: true, message: '异形袋必须上传设计图', trigger: 'change' }]"
        >
          <FileUpload v-model="formData.attach" style="width: 100%" />
        </el-form-item>
      </el-col>
      <!-- 其他袋型设计图为可选 -->
      <el-col v-else :span="20">
        <el-form-item label="设计图" prop="attach" label-width="100px">
          <FileUpload v-model="formData.attach" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 八边封袋配件选择 -->
    <template v-if="formData.bagType === '八边封袋'">
      <el-divider content-position="left">配件信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="气阀类型" prop="valveType">
            <div class="valve-type-selector">
              <div class="valve-options">
                <div
                  v-for="(valve, index) in valveOptions"
                  :key="valve.value"
                  class="valve-option"
                  :class="{ active: formData.valveType === valve.value }"
                  @click="selectValveType(valve.value)"
                >
                  <img
                    v-if="valve.value !== '无气阀'"
                    :src="valve.image"
                    :alt="valve.label"
                    class="valve-image"
                    @click.stop="previewImage(valve.image)"
                  />
                  <span v-else class="valve-label">{{ valve.label }}</span>
                </div>
              </div>
            </div>
            <!-- 图片预览对话框 -->
            <el-dialog v-model="imagePreviewVisible" title="气阀类型预览" width="500px" center>
              <div class="image-preview-container">
                <img :src="previewImageSrc" alt="气阀预览" class="preview-image" />
              </div>
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拉链">
            <el-radio-group v-model="formData.zipperType">
              <el-radio label="易撕拉链">易撕拉链</el-radio>
              <el-radio label="普通拉链">普通拉链</el-radio>
              <el-radio label="无拉链">无拉链</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </template>

    <!-- 吸嘴袋配件和袋型选择 -->
    <template v-if="formData.bagType === '吸嘴袋'">
      <el-divider content-position="left">配件信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="吸嘴类型" prop="spoutType">
            <el-select
              v-model="formData.spoutType"
              placeholder="请选择吸嘴类型"
              style="width: 100%"
            >
              <el-option label="正吸嘴" value="正吸嘴" />
              <el-option label="斜吸嘴" value="斜吸嘴" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="袋型选项" prop="spoutBagType">
            <el-select v-model="formData.spoutBagType" placeholder="请选择袋型" style="width: 100%">
              <el-option label="自立" value="自立" />
              <el-option label="三边封" value="三边封" />
              <el-option label="四边封" value="四边封" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </template>

    <el-divider content-position="left">规格信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="宽度(mm)" prop="w">
          <el-input-number v-model="formData.w" :min="0" placeholder="宽度" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="长度(mm)" prop="l">
          <el-input-number v-model="formData.l" :min="0" placeholder="长度" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="全展(mm)" prop="h">
          <el-input-number
            v-model="formData.h"
            :min="0"
            placeholder="全展(mm)"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="其他规格" prop="remark2">
          <el-input
            v-model="formData.remark2"
            style="width: 100%"
            maxlength="2000"
            show-word-limit
            rows="4"
            type="textarea"
            placeholder="添加其他规格信息或者任意备注"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">数量信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="数量1(个)" prop="quantity1">
          <el-input-number
            v-model="formData.quantity1"
            :min="0"
            placeholder="数量1"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量2(个)" prop="quantity2">
          <el-input-number
            v-model="formData.quantity2"
            :min="0"
            placeholder="数量2"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量3(个)" prop="quantity3">
          <el-input-number
            v-model="formData.quantity3"
            :min="0"
            placeholder="数量3"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 订单信息：新增模式不显示重量和总价 -->
    <el-divider v-if="!isAddMode" content-position="left">订单信息</el-divider>
    <!-- 报价员模式在status=0,1时可以修改重量 -->
    <el-row
      v-if="
        !isAddMode &&
        isQuoteMode &&
        (formData.status === 0 || formData.status === 1 || formData.status === 3)
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="重量(kg)" prop="weight1">
          <el-input-number
            v-model="formData.weight1"
            :min="0"
            placeholder="重量"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量2" prop="weight2">
          <el-input-number
            v-model="formData.weight2"
            :min="0"
            placeholder="重量2"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量3" prop="weight3">
          <el-input-number
            v-model="formData.weight3"
            :min="0"
            placeholder="重量3"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他模式显示重量但不可编辑 -->
    <el-row
      v-if="
        !isAddMode &&
        (!isQuoteMode || (formData.status !== 0 && formData.status !== 1 && formData.status !== 3))
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="重量(kg)" prop="weight1">
          <el-input-number
            v-model="formData.weight1"
            :min="0"
            placeholder="重量"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量2" prop="weight2">
          <el-input-number
            v-model="formData.weight2"
            :min="0"
            placeholder="重量2"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量3" prop="weight3">
          <el-input-number
            v-model="formData.weight3"
            :min="0"
            placeholder="重量3"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 报价员模式在status=0,1时可以修改总价 -->
    <el-row
      v-if="
        !isAddMode &&
        isQuoteMode &&
        (formData.status === 0 || formData.status === 1 || formData.status === 3)
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他模式显示总价但不可编辑 -->
    <el-row
      v-if="
        !isAddMode &&
        (!isQuoteMode || (formData.status !== 0 && formData.status !== 1 && formData.status !== 3))
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

// 导入气阀图片
import valve1Image from "/src/assets/images/气阀/气阀1.jpg";
import valve2Image from "/src/assets/images/气阀/气阀2.jpg";
import valve3Image from "/src/assets/images/气阀/气阀3.jpg";

defineOptions({
  name: "MechanicalPrint2",
  inheritAttrs: false,
});

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  isAddMode: {
    type: Boolean,
    default: false,
  },
  isQuoteMode: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:form-data"]);

// 气阀类型选项
const valveOptions = [
  {
    value: "气阀类型1",
    label: "气阀类型1",
    image: valve1Image,
  },
  {
    value: "气阀类型2",
    label: "气阀类型2",
    image: valve2Image,
  },
  {
    value: "气阀类型3",
    label: "气阀类型3",
    image: valve3Image,
  },
  {
    value: "无气阀",
    label: "无气阀",
    image: "",
  },
];

// 图片预览相关
const imagePreviewVisible = ref(false);
const previewImageSrc = ref("");

// 单价计算
const unitPrice1 = computed(() => {
  if (!props.formData.price1 || !props.formData.quantity1 || props.formData.quantity1 <= 0) {
    return 0;
  }
  return props.formData.price1 / props.formData.quantity1;
});

const unitPrice2 = computed(() => {
  if (!props.formData.price2 || !props.formData.quantity2 || props.formData.quantity2 <= 0) {
    return 0;
  }
  return props.formData.price2 / props.formData.quantity2;
});

const unitPrice3 = computed(() => {
  if (!props.formData.price3 || !props.formData.quantity3 || props.formData.quantity3 <= 0) {
    return 0;
  }
  return props.formData.price3 / props.formData.quantity3;
});

// 处理袋型变化，清空相关配件字段
const handleBagTypeChange = () => {
  const updatedData = { ...props.formData };

  // 清空所有配件相关字段
  updatedData.valveType = "";
  updatedData.zipperType = "";
  updatedData.spoutType = "";
  updatedData.spoutBagType = "";

  // 如果不是异形袋，清空设计图的必填要求
  if (updatedData.bagType !== "异形袋") {
    // 这里可以根据需要处理设计图字段
  }

  emit("update:form-data", updatedData);
};

// 选择气阀类型
const selectValveType = (value) => {
  const updatedData = { ...props.formData };
  updatedData.valveType = value;
  emit("update:form-data", updatedData);
};

// 预览图片
const previewImage = (imageSrc) => {
  previewImageSrc.value = imageSrc;
  imagePreviewVisible.value = true;
};

// 监听配件字段变化，同步到父组件
watch(
  () => [
    props.formData.valveType,
    props.formData.zipperType,
    props.formData.spoutType,
    props.formData.spoutBagType,
  ],
  () => {
    emit("update:form-data", props.formData);
  },
  { deep: true }
);
</script>

<style scoped>
.unit-price-display {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
  text-align: right;
}

.valve-type-selector {
  .valve-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .valve-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border: 2px solid #dcdfe6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 80px;

    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
    }

    &.active {
      border-color: #409eff;
      background-color: #ecf5ff;
    }

    .valve-image {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 4px;
      cursor: zoom-in;
    }

    .valve-label {
      font-size: 12px;
      color: #606266;
      text-align: center;
    }
  }
}

.image-preview-container {
  text-align: center;

  .preview-image {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
  }
}
</style>
